{% extends base.html %}

{% block head %}

<style type="text/css">
    .content {
        width: 90%;
        float: none;
    }
</style>
{% end %}

{% block body %}

{% init error = "" %}
{% init address = "" %}
{% init images = [] %}
{% init scripts = [] %}
{% init texts = [] %}

<div class="rol-md-12 top-offset-1">
    <form method="POST" enctype="multipart/form-data">
        <h2>上传文件或者填写网址</h2>
        <p><input type="file" name="file" /></p>
        <p>网址<input type="text" name="url" style="width: 50em;" value="{{url}}" /></p>
        <!-- <p>下载资源<input type="checkbox" name="download_res"/></p> -->
        <input type="submit" value="Submit"/>
    </form>
</div>

<div style="color:red;">{{error}}</div>

<h2>Markdown 文本</h2>
<div>
    资料名:<input id="savedName">
    <input type="button" id="saveToDbBtn" class="btn" value="保存到资料库">
</div>
<textarea rows="30" class="content" id="content">
{% for text in texts%}{{text}}
{% end %}
</textarea>

<h2>纯文本</h2>
<div><button id="readText">阅读</button></div>
<textarea rows="30" class="content" id="plainText">{{?plain_text}}</textarea>

<h2>Images</h2>
<textarea rows={{len(images)+2}} class="content">
{% for image in images %}{{image}}
{% end %}
</textarea>

<!-- {% for image in images %}
<img src="{{image}}"/>
{% end %} -->

<h2>Scripts</h2>
<textarea rows="{{len(scripts)+2}}" class="content">
{% for script in scripts%}{{script}}
{% end %}
</textarea>

<script type="text/javascript">
$("#saveToDbBtn").on("click", function () {
    var name = $("#savedName").val();
    var content = $("#content").val();
    $.post("/file/add", 
        {"_type": "json", "name": name, "content": content, "type": "md"}, 
        function (responseText) {
            console.log(responseText);
            var data = responseText;
            if (data.code == "success") {
                location.href = "/file/view?id=" + data.id;
            } else {
                alert(data.message);
            }
    })
});

$("#readText").click(function () {
    $.post("/api/tts", {content: $("#plainText").text()}, function (resp) {

    });
})
</script>

{% end %}